<template>
  <div>
    <VueOfficeDocx v-if="comtype === 'vue-office-docx'" :src="filePath" @rendered="rendered" :install="handle">
    </VueOfficeDocx>
    <VueOfficePdf v-if="comtype === 'vue-office-pdf'" :src="filePath" @rendered="rendered" :install="handle">
    </VueOfficePdf>
    <VueOfficeExcel v-if="comtype === 'vue-office-excel'" :src="filePath" @rendered="rendered" :install="handle">
    </VueOfficeExcel>
    <el-image-viewer v-if="comtype === 'el-image-viewer'" :url-list="[filePath as string]"
      @close="closePreviewimage"></el-image-viewer>
  </div>
</template>

<script setup lang="ts">
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficeDocx from "@vue-office/docx";

import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

import { CompType } from "./type";
import { onMounted, ref } from "vue";

const filePath = ref<string | ArrayBuffer>();
const emit = defineEmits(['closepreview']);

const handle = (vue) => {
  console.log(vue);
};

const closePreviewimage = () => {
  emit("closepreview", false);
};

const { comtype, file, url } = defineProps<{
  comtype: CompType;
  file?: File;
  url?: string
}>();

const rendered = () => {
  console.log("渲染完成！");
};

onMounted(() => {
  if (file) {
    const fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = (e) => {
      filePath.value = e.target.result;
    }
  } else {
    filePath.value = url;
  }
})

</script>

<style scoped lang="less"></style>
